﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery范围选择插件RangeSlider</title>
<link rel="stylesheet" href="css/normalize.min.css" />
<link rel="stylesheet" href="css/ion.rangeSlider.css" />
<link rel="stylesheet" href="css/ion.rangeSlider.skinFlat.css" id="styleSrc"/>
</head>
<body>
<div style="position:relative; padding:200px;width:250px;margin:0 auto;font-size:12px;">
<input type="text" id="range_1" />
<br/><br/><br/>
<center>
<select id="selectStyle">
	<option value="css/ion.rangeSlider.skinFlat.css">样式一（扁平化）</option>
    <option value="css/ion.rangeSlider.skinNice.css">样式二（白色）</option>
    <option value="css/ion.rangeSlider.skinSimple.css">样式三（默认）</option>
</select>
</center>
</div>
<!-- All JS --> 
<script src="js/jquery-1.11.0.min.js"></script> 
<script src="js/ion.rangeSlider.js"></script> 
<script>
$(document).ready(function(){
	$("#range_1").ionRangeSlider({
		min: 0,
		max: 5000,
		from:1000,
		to: 4000,
		type: 'double',//设置类型
		step: 1,
		prefix: "",//设置数值前缀
		postfix: "元",//设置数值后缀
		prettify: true,
		hasGrid: true
	});
	$("#selectStyle").change(function(){
			$("#styleSrc").attr("href",$(this).val());
		});
});
$("#range_1").click(function(){
		alert("呵呵");
	})
</script>


</body>
</html>
